{extend name="wap/default_new/base" /}
{block name="resources"}
<link rel="stylesheet" href="__TEMP__/{$style}/public/js/citySelect/css/mui.min.css" />
<link rel="stylesheet" href="__TEMP__/{$style}/public/js/citySelect/css/mui.indexedlist.css" />
<script type="text/javascript" src="__TEMP__/{$style}/public/js/citySelect/js/mui.js" ></script>
<script type="text/javascript" src="__TEMP__/{$style}/public/js/citySelect/js/mui.indexedlist.js" ></script>
<style>
html{width: 100%;height: 100%; font-size: 100px; }
body{
	width: 100%;height: 100%;
    min-width: 320px;/*为什么这里不能用rem，因为这是body的宽度，如果用rem那就一直都是1，没有办法缩小*/
    max-width: 640px;
    font-size: 12px;
    margin: auto;
    font-family: "microsoft yahei",arial;
}
*{ margin: 0; padding: 0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
h1,h2,h3,h4,h5,h6,p,dd{margin:0;}
ul,ol,dl{margin:0;padding:0;list-style:none;}
img,input{border:none;vertical-align:middle;}
select{ -webkit-appearance: none;  -webkit-tap-highlight-color: #fff;  outline: 0;  }
a{text-decoration:none;color:inherit;outline:none;}

/*location开始*/
.mui-backdrop-action.mui-backdrop.mui-active, .mui-bar-backdrop.mui-backdrop.mui-active{opacity: 0;}
.mui-indexed-list-search.mui-search:before{margin-top: -15px;}
.mui-input-row.mui-search .mui-icon-clear{top: 10px;}
.location{width: 100%;max-width:640px; margin: auto; }
.location .mui-search .mui-placeholder .mui-icon{margin-right: 0.1rem;}
.location .mui-indexed-list-group{background-color: #f7f4f8;}
.mui-table-view-divider:after,.mui-table-view:before,.mui-table-view-divider:before{height: 0;}
.location .mui-bar-nav~.mui-content{padding-top: 0;}
.location .mui-table-view-cell:after{left: 0;color: #d2d2d2;}
.location .mui-table-view-cell{padding: 13px 15px;}
.location input[type='search']{height: 44px;background-color: none;}
.location .mui-search .mui-placeholder{line-height: 44px;height: 44px;}
.location .mui-indexed-list-inner{/*padding-top: 2.5rem;*/position: relative;overflow: auto;}
.location .guild{position: absolute;z-index: 9; top: 0rem; width: 100%; height: auto;padding: 0 20px 0 10px;}
.place_ac{padding:0 23px 10px 0;}
.location .guild h5{line-height: 30px;padding-top: 10px;}
.location .guild .btnout{width: 25%;float: left;padding: 0 10px;margin: 10px 0;}
.location .guild .btnout button{width: 100%;}
#place_ac{overflow:hidden;}

.location-f-box{position:absolute;background-color:#FFF;overflow:hidden;left:0;right:0px;}
.location-f-left{float:left;margin-left:10px;}
.location-f-right{float:right;margin-right:33px;position:relative;}
.location-f-style{padding:7px 0px;font-size: 15px;font-weight: 400;color: #8f8f94;}

.icon-location-refresh {

}
/*location结束*/
</style>
{/block}
{block name="goodsHead"}

{/block}
{block name="main"}
<div class="location" id="location" style="display: block;">
	<div class="mui-content">
		<div id='list' class="mui-indexed-list">
			<div class="mui-indexed-list-search mui-input-row mui-search"><input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="输入城名查询或首字母查询，例：北京，B" style="background: none;"></div>
			
			<div class="location-f-box">
				<div class="location-f-left location-f-style">
					当前：<span id="citySelect">{$city_session}</span>
				</div>
				<div class="location-f-right location-f-style location-refresh">
					<i class="icon-location-refresh fa fa-refresh"></i>&nbsp;&nbsp;<span>重新定位</span>
				</div>
			</div>
			<div class="mui-indexed-list-bar">
				{foreach $latter_item as $vo} 
				    <a>{$vo}</a>
				{/foreach}
			</div>
			<div class="mui-indexed-list-alert"></div>
			<div class="mui-indexed-list-inner">
				<div class="guild">
					<h5 style="margin-left:10px;">热门城市</h5>
					<div class="place_ac clearfix" id="place_ac">
						{foreach $hot_city_item as $hot_city_value}
							<div class="btnout"><button type="button" class="mui-btn mui-btn-outlined">{$hot_city_value}</button></div>
						{/foreach}
					</div>
				</div>
				<div class="mui-indexed-list-empty-alert">没有数据</div>
				<ul class="mui-table-view" id="place_list">
					{foreach $city_item as $key => $city_array}
						<li data-group="{$key}" class="mui-table-view-divider mui-indexed-list-group">{$key}</li>
						{foreach $city_array as $city_val}
							<li data-value="{$key}" data-tags="{$key}" class="mui-table-view-cell mui-indexed-list-item">{$city_val}</li>
						{/foreach}
					{/foreach}
				</ul>
			</div>
		</div>
	</div>
</div>
{/block} 
{block name="bottom"}{/block} 
{block name="javascript"}
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&amp;key=2df5711d4e2fd9ecd1622b5a53fc6b1d"></script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script> 
<script type="text/javascript" src="__STATIC__/js/location.js"></script> 
<script type="text/javascript">
//location的height
//获取高度作出padding值


mui.init();	
mui.ready(function() {
	var list = document.getElementById('list');
	//calc hieght
	list.style.height = (document.body.offsetHeight) + 'px';
	//create
	window.indexedList = new mui.IndexedList(list);
	$('.mui-placeholder').css({'z-index':'-1'});
});

function other_cities1(){
	//显示地图sdfsdf
	$('#location').show();
	$('#location_box').hide();
	$('#index_page').hide();
	//初始化再次加载
	mui.init();	
	mui.ready(function() {
		var list = document.getElementById('list');
		//calc hieght
		list.style.height = (document.body.offsetHeight) + 'px';
		//create
		window.indexedList = new mui.IndexedList(list);
		$('.mui-placeholder').css({'z-index':'-1'});
	});
	//获取高度作出padding值
	var guild = $('.guild').height();
	$('.location .mui-indexed-list-inner').css({'padding-top':guild});
	$('.mui-indexed-list-bar a').height('3.85%');
}

//获取高度作出padding值
/* var guild = $('.guild').height();
$('.location .mui-indexed-list-inner').css({'padding-top':guild}); */

$(function(){
	getCityLocation();//定位
	$(".mui-table-view-cell.mui-indexed-list-item,.mui-btn.mui-btn-outlined").on("click",function(){
	  var city = $(this).text();
	
	  setCityLocation(city, false);
	  showBox("已切换到"+city, "success", __URL("APP_MAIN/index/index"));
	});
	$(".location-refresh").on("click",function(){
		getLocation(function(data){
			(data != "") ? ($("#citySelect").text(data.addressComponent.city)) (setCityLocation(data.addressComponent.city)) : $("#citySelect").text("定位失败");
		});
	});
});
/**
 * 得到定位
 */
function getCityLocation(){
	var citySelect = $("#citySelect").text();
	if(citySelect == ""){
		getLocation(function(data){
			(data != "") ? ($("#citySelect").text(data.addressComponent.city)) (setCityLocation(data.addressComponent.city, false)) : $("#citySelect").text("定位失败");
		});
	}
}
</script>
{/block}